<template>
	<view>
		<template v-if="loadFlag">
			<view class="loadingWrap">
				<loading></loading>
			</view>
		</template>
		<template v-else>
			<view class="wrap">
				<view class="basicInfo posRel">
					<view class="infoTit posAbso rtzero">
						<text class="iconfont icon-gerenxinxi"></text>
						<text>个人信息</text>
					</view>
					<view class="infoName">
						<text class="userName">{{basicInfo.userName}}</text>
						<text>性别：{{basicInfo.sex}}</text>
					</view>
					<view class="infoItem">联系方式：{{basicInfo.mobile}}</view>
					<view class="infoItem">联系地址：{{basicInfo.address}}</view>
				</view>
				<view class="modItem">
					<view class="modTit hasFlex">
						<view class="iconfont icon-grid"></view>
						<view>负责网格</view>
					</view>
					<view class="modCon">
						<view class="gridItem"
							v-for="(item,index) in gridList"
							:key="index"
						>网格{{index+1}}：{{item.city}}{{item.county}}/{{item.town}}/{{item.levelB}}</view>
					</view>
				</view>
				<view class="modItem" v-if="basicInfo.profile != ''">
					<view class="modTit hasFlex">
						<view class="iconfont icon-profile"></view>
						<view>个人简介</view>
					</view>
					<view class="modCon profile">{{basicInfo.profile}}</view>
				</view>
			</view>
			<view class="botBtnGroup hasFlex">
				<button class="comBtn posRel" @tap="goMakePhoneCall">
					<text class="iconfont icon-hujiao posAbso"></text>
					<text>立即呼叫</text>
				</button>
			</view>
		</template>
	</view>
</template>

<script>
	import { getWorkerDet } from '@/api/xlzx/index.js'
	export default {
		data(){
			return{
				loadFlag:true,
				workerId:'',
				basicInfo:null,
				gridList:[]
			}
		},
		onLoad(options){
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
			this.workerId = options.id;
			this.getWorkerDet();
		},
		methods:{
			onShareAppMessage(res){
				return{
					title:'网格员' + this.basicInfo.userName + '详情',
					imageUrl:this.shareDefGrid
				}
			},
			getWorkerDet(){
				this.loadFlag = true;
				let field = { id:this.workerId };
				getWorkerDet(field).then(res=>{
					this.loadFlag = false;
					let tmpRes = res.data.datas;
					this.gridList = tmpRes.workRangeList;
					this.basicInfo = tmpRes.workerDetail;
				}).catch(err=>{ 
					this.loadFlag = false;
					console.log(err)
				});
			},
			goMakePhoneCall(){
				uni.makePhoneCall({
					phoneNumber:this.basicInfo.mobile
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$comBg:#FAF9FE;
	.wrap{
		padding: 30rpx;
	}
	.basicInfo{
		background: linear-gradient(0deg, rgba(0, 103, 236, 1) 0%, rgba(155, 243, 248, 1) 100%);
		border-radius: 16rpx;
		padding: 60rpx 20rpx 20rpx;
		color: #fff;
		font-size: 26rpx;
		margin-bottom: 60rpx;
		.infoTit{
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 20rpx;
			background: linear-gradient(90deg, rgba(54, 148, 255, 1) 0%, rgba(148, 153, 255, 1) 100%);
			border-radius: 0 16rpx 0 32rpx;
			.icon-gerenxinxi{
				margin-right: 5rpx;
				font-size: 30rpx;
			}
		}
		.infoName{
			margin-bottom: 20rpx;
			.userName{
				font-size: 36rpx;
				font-weight: 600;
				margin-right: 20rpx;
			}
		}
		.infoItem{
			line-height:40rpx;
		}
	}
	.modItem{
		color: $pss-text-color0;
		margin-bottom: 30rpx;
		.modTit{
			font-size: 30rpx;
			align-items: center;
			margin-bottom: 20rpx;
			.iconfont{
				font-size: 42rpx;
				color: $pss-color-blueDeep;
				margin-right: 10rpx;
				&.icon-grid{
					font-size: 30rpx;
				}
			}
		}
		.modCon{
			background: $comBg;
			padding:20rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			.gridItem{
				line-height: 56rpx;
			}
			&.profile{
				color: $pss-text-color8;
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
	.botBtnGroup{
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -10rpx 10rpx rgba(127, 188, 255, .1);
		align-items: center;
		--sonHei:80rpx;
		.comBtn{
			flex: 1;
			height: var(--sonHei);
			margin:0 20rpx;
			border-radius: 50rpx;
			line-height: var(--sonHei);
			font-size: 30rpx;
			.icon-hujiao{
				font-size: 36rpx;
				left: 150rpx;
			}
		}
	}
</style>